<template>
	<view class="con-box">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">转让明细</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right"></view>
			</view>
		</u-navbar>
		
		<view class="show-list">
			<scroll-view scroll-y="true" style="width: 100%;height:100%;" >
				<view class="list-item" v-for="(item,index) in accountDetails" :key="index">
					<view class="list-item-right">
						<view class="item-right-left">
							<view class="name">{{item.type | setName}}</view>
							<view class="date">{{moment(item.created).format('MM-DD HH:mm')}}</view>
						</view>
						<view class="item-right-left" style="text-align: right;">
							<view :class="['price',setClas(item.amount)]">{{Number(item.amount).toFixed(2) > 0 ?"+"+Number(item.amount).toFixed(2):Number(item.amount).toFixed(2)}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="noData" v-if="accountDetails.length == 0">
			<image class="noDataImg" src="@/static/noData.png" mode=""></image>
		</view>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		getuserbalancelog
	} from '../../api/user.js'
	export default {
		data(){
			return {
				accountDetails:[],
				listQuery: {
					page: 1,
					pageSize: 10,
					pages:1,
					type:""
				},
			}
		},
		onShow() {
			this.getNftList();
		},
		filters:{
			setName(type){
				// 1充值2提现3发售购买4抢购购买5转售购买6抢购退款7转售转让
				let str = "";
				if(type == 1){
					str = "充值";
				}else if(type == 2){
					str = "提现";
				}else if(type == 3){
					str = "购买产品";
				}else if(type == 4){
					str = "抢购购买";
				}else if(type == 5){
					str = "转售购买";
				}else if(type == 6){
					str = "抢购退款";
				}else if(type == 7){
					str = "转售收益";
				}
				return str;
			}
		},
		methods:{
			setClas(data){
				let clas = "";
				if(data){
					if(data < 0){
						clas = "price1";
					}
				}
				return clas;
			},
			back(){
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
				    uni.navigateBack({  
				      delta: 1  
				    });  
				} else {  
				    history.back();  
				}
			},
			getNftList() {
				this.$nextTick(() => {
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				getuserbalancelog(this.listQuery).then(res => {
					this.listQuery.pages = res.data.totalPage;
					if (res.data.rows) {
						this.accountDetails = res.data.rows;
					}
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			// 判断这个地址是视频还是图片
			isImage(url) {
				if (!url) {
					return
				}
				let filePath = url.toLocaleLowerCase();
				if (filePath.indexOf(".mp4") != -1) {
					return false;
				} else {
					return true;
				}
			},
			submitFn(){
				
			}
		},
		onReachBottom(){
			if(this.listQuery.pages > this.listQuery.page){
				this.listQuery.page++;
				this.getNftList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{height: 100%;}
	.con-box {
		min-height: 100vh;
		padding: 120upx 0upx 0;
		height: 100%;
		background-color: #fff;
		.logoBox{
			width: 100%;
			height: 100%;
			.navBox{
				height: 120upx;
				background-image: url("@/static/common/bg1.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
		.noData{
			position: absolute;
			width: 220upx;
			height: 180upx;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-90%);
			.noDataImg{
				width: 220upx;
				height: 180upx;
			}
		}
		.show-list{
			width: 100%;
			height: 100%;
			padding: 0 30upx;
			padding-top: 50upx;
			.list-item{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20upx;
				.list-item-right{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F7F7F7;
					padding-bottom: 20upx;
					.item-right-left{
						color: #ACACAC;
						font-size: 24upx;
						font-weight: 400;
						text-align: left;
						line-height: 24upx;
						.name{
							color: #333;
							margin-bottom: 10upx;
						}
						.date{
							color: #999;
						}
						.price{
							color: #EB5703;
						}
						.price1{
							color: #33D29C;
						}
					}
				}
			}
		}
	}
</style>
